<template>
    <div>
        <lottieLoading v-if='progress.show'></lottieLoading>
        <el-container>
            <el-header class="el-header" :class="elm" style="z-index: 999;">
                <Header></Header>
            </el-header>
            <!-- 视屏背景搜索条 -->
            <div style="width: 100%;height: 100vh;margin-top: 60px;position: relative;" v-if='$route.path=="/"'>
                <div class="video-container">
                    <div :style="fixStyle" class="filter"></div>
                    <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay" :src="randomSrc"
                        type="video/mp4" muted>
                        <!-- <source  /> -->
                    </video>
                    <div class="poster hidden" v-if="!vedioCanPlay">
                        <!-- <img :style="fixStyle" src="../../assets/img/coverr-wood-processing-1570351718285.jpg" alt="" > -->
                    </div>
                </div>

                <img src="../../assets/img/logo.png" alt="" class="logoImg">
                <p class="logo_text"> Your art blog repository.</p>
                <div class='logoInput'>
                    <i class="iconfont icon-sousuo"
                        style="float: left;height: 50px;line-height: 50px;margin-left: 10px;"></i>
                    <input type="text" placeholder="请在这里输入您想要的博客" v-model='searchtxt'>
                    <div class="searchBtn" @click='fnsearch'>搜索</div>
                </div>
            </div>
            <!-- 视屏背景搜索条 -->
            <el-main>
                <!-- 含有过渡动画的router -->
                <transition name="custom-classes-transition" :enter-active-class="enterAnimate">
                    <keep-alive include="blogList">
                        <router-view class="child-view" ref="routerView" :key='nowTime'></router-view>
                    </keep-alive>
                </transition>

                <upBtn ref="upBtn"></upBtn>
            </el-main>
            <el-footer>
                <Footer></Footer>
            </el-footer>
        </el-container>
    </div>

</template>

<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import upBtn from "../../components/upBtn/upBtn";
import blog from "../../api/blog";

export default {
    name: "index",
    components: {
        Header,
        Footer,
        upBtn
    },
    data() {
        return {
            showStyle: false,
            isRun: false,
            slogan: null,
            enterAnimate: "animated fadeIn",
            leaveAnimate: "animated fadeOut",
            isScroll: false,
            nowTime: '',
            top: 0,//滚动条位置
            elm: '',//收起动画
            fixStyle: '',
            vedioCanPlay: '',
            randomSrc: 's1',
            searchtxt:''
        };
    },
    watch: {
        '$route': function (newUrl, oldUrl) {
            this.nowTime = new Date().getTime();
        }
    },
    mounted() {
        console.log(this.$route)
        this.checkLogin();
        this.randomSrc = `http://dlhtx.zicp.vip:3000/img/s${Math.floor(Math.random() * 3 + 1)}.mp4`
        //window.addEventListener('scroll', this.handleScroll, true)
        window.addEventListener('scroll', this.handleScroll, true);
        console.log(this.$refs.routerView);

        window.onresize = () => {
            const windowWidth = document.body.clientWidth
            const windowHeight = document.body.clientHeight
            const windowAspectRatio = windowHeight / windowWidth
            let videoWidth
            let videoHeight
            if (windowAspectRatio < 0.5625) {
                videoWidth = windowWidth
                videoHeight = videoWidth * 0.5625
                this.fixStyle = {
                    height: windowWidth * 0.5625 + 'px',
                    width: windowWidth + 'px',
                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                    'margin-left': 'initial'
                }
            } else {
                videoHeight = windowHeight
                videoWidth = videoHeight / 0.5625
                this.fixStyle = {
                    height: windowHeight + 'px',
                    width: windowHeight / 0.5625 + 'px',
                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                    'margin-bottom': 'initial'
                }
            }
        }
        window.onresize()
    },
    methods: {
        ...mapActions(["checkLogin", "getPermissions"]),
        showUpBtn() { },
        canplay() {
            this.vedioCanPlay = true
        },
        handleScroll() {
            // 页面滚动距顶部距离
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
                document.body.scrollTop
            var scroll = scrollTop - this.i;
            this.i = scrollTop;
            if (scroll < 0) {
                this.elm = 'scrollToDown'
            } else {//向下滚动 收起来
                // this.isShow = true
                this.elm = 'scrollToTop'
            }
        },
        async fnsearch(){
            let res = await blog.searchBlogbyTitleAndBody(this.searchtxt)
            if(res.data!=''){
                console.log(res)
                // this.$router.push('/searchBlog')
                this.searchtxt=''
                this.$router.push({name:'searchBlog',query:{result:res.data}})
            }else{
                return this.$message('没有搜索到相关内容')
            }
            console.log(res)
        }
    },
    computed: {
        ...mapGetters([
            'isLogin',
            'user',
            'progress'
        ]),
    },
    watch: {

    }
};
</script>

<style lang="less" scoped>
@import "../../assets/common.less";
@import "../../assets/css/animate.css";
.video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.video-container .poster img,
.video-container video {
    z-index: 0;
    position: absolute;
}

.video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
}
.el-header {
    transition: all 0.3s;
}
.el-footer {
    height: 10vh !important;
    background: rgb(46, 48, 51);
    color: white;
    padding: 2vh;
}
.scrollToTop {
    animation-name: scroll;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.scrollToDown {
    animation-name: scrollDown;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
@keyframes scroll {
    0% {
        top: 0;
    }
    100% {
        top: -70px;
    }
}
@keyframes scrollDown {
    0% {
        top: -70px;
    }
    100% {
        top: 0;
    }
}
.logoImg {
    position: absolute;
    z-index: 999;
    width: 300px;
    left: 50%;
    transform: translateX(-150px);
    top: 23%;
}
.logo_text {
    position: absolute;
    z-index: 999;
    width: 1000px;
    left: 50%;
    -webkit-transform: translateX(-150px);
    transform: translateX(-500px);
    top: 38%;
    text-align: center;
    color: white;
    font-size: 2rem;
}
.logoInput {
    width: 500px;
    background: white;
    height: 50px;
    border-radius: 5px;
    position: absolute;
    z-index: 999;
    width: 500px;
    left: 50%;
    transform: translateX(-250px);
    top: 55%;
}
.logoInput input {
    height: 99%;
    width: 60%;
    border: none;
    background: #ff000000;
    outline: none;
    display: inline;
    padding-left: 10px;
}
.searchBtn {
    float: right;
    height: 50px;
    line-height: 50px;
    width: 74px;
    background: #232323;
    text-align: center;
    color: white;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s;
    &:hover {
        background: #505050;
        transition: all 0.3s;
        width: 84px;
    }
}
</style>